<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :sm="24" :lg="24">
                <el-form-item>
                    <el-button type="primary" icon="" @click="">启动</el-button>
                </el-form-item>
                <hr />
            </el-col>
        </el-row>
        <el-row :gutter="0">
            <el-col :xs="24" :sm="24" :md="24" :lg="19">
                <SpectrumView show-type="1"></SpectrumView>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="5">
                <el-card class="workParamCard">
                    <el-form ref="workParamsForm" :model="workParams" :rules="rules" size="medium" label-width="100px" >
                        <el-form-item label="样本来源" prop="sampleFrom">
                            <el-select v-model="workParams.sampleFrom" placeholder="请选择样本来源" :style="{width: '100%'}">
                                <el-option v-for="(item, index) in sampleFromOptions" :key="index" :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="样本地址" prop="samplePath">
                            <input  id="localhostFile" type="file" title="content" style="display:none;" @change="changeFile(e)"/>
<!--                            <el-input v-model="workParams.samplePath" placeholder="请选择样本">-->
<!--                                -->
<!--                            </el-input>-->
                            <el-input @click="selectSamplePath" :disabled="false" :style="{width: '100%'}" title="content" v-model="workParams.samplePath"></el-input>
                        </el-form-item>
                        <el-form-item label="采样速率" prop="sampleRate">
                            <el-input-number v-model="workParams.sampleRate" placeholder="请输入采样速率" precision="6" min="10"  :style="{width: '100%'}">
                                <template slot="append">MHz</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="采样频率" prop="sampleFreq">
                            <el-input-number v-model="workParams.sampleFreq" placeholder="请输入采样频率" precision="6" min="10"  :style="{width: '100%'}">
                                <template slot="append">MHz</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="工作模式" prop="workMode">
                            <el-select v-model="workParams.workMode" placeholder="请选择工作模式" :style="{width: '100%'}">
                                <el-option v-for="(item, index) in workModeOptions" :key="index" :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="起始频率" prop="startFreq" v-show="workParams.workMode===0">
                            <el-input-number v-model="workParams.startFreq" placeholder="请输入起始频率" precision="6" min="10"  :style="{width: '100%'}">
                                <template slot="append">MHz</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="结束频率" prop="stopFreq" v-show="workParams.workMode===0">
                            <el-input-number v-model="workParams.stopFreq" placeholder="请输入结束频率" precision="6" min="10"  :style="{width: '100%'}">
                                <template slot="append">MHz</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="载波频率" prop="carrierFreq" v-show="workParams.workMode===1">
                            <el-input-number v-model="workParams.carrierFreq" placeholder="请输入载波频率" precision="6" min="10"  :style="{width: '100%'}">
                                <template slot="append">MHz</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="载波带宽" prop="carrierBand" v-show="workParams.workMode===1"  precision="3" min="10"  :style="{width: '100%'}">
                            <el-input-number v-model="workParams.carrierBand" placeholder="请输入载波带宽">
                                <template slot="append">KHz</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="处理模式" prop="disposeMode">
                            <el-select v-model="workParams.disposeMode" placeholder="请选择处理模式" :style="{width: '100%'}">
                                <el-option v-for="(item, index) in disposeModeOptions[workParams.workMode]" :key="index" :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>

                            </el-select>
                        </el-form-item>
                        <el-form-item size="large">
                            <el-button type="primary" @click="submitForm">提交</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="0">
            <el-col :xs="24" :sm="24" :md="24" :lg="19">
                <el-card class="spectrumCard">
                    <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="载波频率" align="center" prop="infoId" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']"/>
                        <el-table-column label="载波带宽" align="center" prop="userName" :show-overflow-tooltip="true"  />
                        <el-table-column label="信噪比" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
                        <el-table-column label="传输方式" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
                        <el-table-column label="调制速率" align="center" prop="os" :show-overflow-tooltip="true" />
                        <el-table-column label="调制方式" align="center" prop="browser" :show-overflow-tooltip="true" />
                        <el-table-column label="编码方式" align="center" prop="status" :show-overflow-tooltip="true"/>
                        <el-table-column label="码率" align="center" prop="msg" :show-overflow-tooltip="true" />
                        <el-table-column label="检测时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="5">
                <el-card class="spectrumCard">
                    载波图形区域
                </el-card>
            </el-col>
        </el-row>
<!--        选择系统样本-->
        <el-dialog :title="serverFileDialog.title" v-model="serverFileDialog.open" width="1400px" append-to-body>
            <el-row :gutter="10" class="">
                <el-form :model="serverFileDialog.queryParams" ref="querySampleForm" :inline="true" v-show="serverFileDialog.showSearch" label-width="68px">
                    <el-form-item label="样本名称" prop="sampleName">
                        <el-input
                            v-model="serverFileDialog.queryParams.sampleName"
                            placeholder="请输入样本名称"
                            clearable
                            style="width: 120px"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="卫星名称" prop="satelliteName">
                        <el-input
                            v-model="serverFileDialog.queryParams.satelliteName"
                            placeholder="请输入卫星名称"
                            clearable
                            style="width: 120px"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="处理状态" prop="disposeStatus">
                        <el-select
                            v-model="serverFileDialog.queryParams.disposeStatus"
                            placeholder="处理状态"
                            clearable
                            style="width: 120px"
                        >
                            <el-option
                                v-for="dict in serverFileDialog.disposeStatusOptions"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="导入时间" style="width: 308px;">
                        <el-date-picker
                            v-model="serverFileDialog.queryDateRange"
                            value-format="YYYY-MM-DD"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row :gutter="10" class="">
                <right-toolbar v-model:showSearch="serverFileDialog.showSearch" @queryTable="handleQuery" :columns="serverFileDialog.showColumns"></right-toolbar>
            </el-row>
            <el-row :gutter="10" class="">
                <el-table v-loading="serverFileDialog.loading" :data="serverFileDialog.sampleList" >
<!--                <el-table-column type="selection" width="50" align="center" />-->
                <el-table-column label="样本id" align="center" key="sampleId" prop="sampleId" v-if="serverFileDialog.showColumns[0].visible" />
                <el-table-column label="样本名称" align="center" key="sampleName" prop="sampleName" v-if="serverFileDialog.showColumns[1].visible" :show-overflow-tooltip="true" />
                <el-table-column label="射频频率" align="center" key="sampleFreq" prop="sampleFreq" v-if="serverFileDialog.showColumns[2].visible" :show-overflow-tooltip="true" />
                <el-table-column label="采样速率" align="center" key="sampleRate" prop="sampleRate" v-if="serverFileDialog.showColumns[3].visible" :show-overflow-tooltip="true" />
                <el-table-column label="处理状态" align="center" key="disposeStatus" prop="disposeStatus" v-if="serverFileDialog.showColumns[4].visible"/>
                <el-table-column label="卫星名称" align="center" key="satelliteName" prop="satelliteName" v-if="serverFileDialog.showColumns[5].visible"/>
                <el-table-column label="入库时间" align="center" prop="joinTime" v-if="serverFileDialog.showColumns[6].visible">
<!--                    <template #default="scope">-->
<!--                        <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!--                    </template>-->
                </el-table-column>
            </el-table>
            </el-row>
            <el-row>
            <pagination
                v-show="serverFileDialog.sampleTotal > 0"
                :total="serverFileDialog.sampleTotal"
                v-model:page="serverFileDialog.queryParams.pageNum"
                v-model:limit="serverFileDialog.queryParams.pageSize"
                @pagination="querySamples"
            />
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitChooseServerFile">确 定</el-button>
                    <el-button @click="cancelChooseServerFile">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: [],
    data() {
        return {
            serverFileDialog:{ //《服务样本选择》Dialog
                loading:false,
                sampleTotal:1,
                sampleList:[{sampleId:1,sampleName:'样本1',sampleFreq:1653.25,sampleRate:200,disposeStatus:1,satelliteName:'风云1号',joinTime:'2023-06-12 12:50:10'}],
              open:false,
                title: '选择系统样本',//《服务样本选择》Dialog 的标题
                showSearch:true,
                disposeStatusOptions:[{label:'全部状态',value:0},{label:'已处理',value:1},{label:'未处理',value:2}],
                queryParams:{
                    pageNum: 1,
                    pageSize: 10,
                    sampleName:'',
                    satelliteName:'',
                    disposeStatus:0,
                },
                queryDateRange: [],
                showColumns: [
                    { key: 0, label: `样本Id`, visible: true },
                    { key: 1, label: `样本名称`, visible: true },
                    { key: 2, label: `射频频率`, visible: true },
                    { key: 3, label: `采样速率`, visible: true },
                    { key: 4, label: `卫星名称`, visible: true },
                    { key: 5, label: `处理状态`, visible: true },
                    { key: 6, label: `入库时间`, visible: true }
                ]
            },
            localhostFile:null,
            workParams: {
                sampleFrom: 1,
                samplePath: '',
                sampleRate: '',
                sampleFreq: '',
                workMode: 0,
                startFreq: '',
                stopFreq: '',
                carrierFreq: '',
                carrierBand: '',
                disposeMode: 0
            },
            rules: {
                sampleFrom: [{
                    required: true,
                    message: '请选择样本来源',
                    trigger: 'change'
                }],
                sampleRate: [{
                    required: true,
                    message: '请输入采样速率',
                    trigger: 'blur'
                }, {
                    pattern: /^(\.*)(\d+)(\.?)(\d{0,6}).*$/g,
                    message: '请输入数字',
                    trigger: 'blur'
                }],
                sampleFreq: [{
                    required: true,
                    message: '请输入采样频率',
                    trigger: 'blur'
                }, {
                    pattern: /^(\.*)(\d+)(\.?)(\d{0,6}).*$/g,
                    message: '请输入数字',
                    trigger: 'blur'
                }],
                workMode: [{
                    required: true,
                    message: '请选择工作模式',
                    trigger: 'change'
                }],
                startFreq: [{
                    required: true,
                    message: '请输入起始频率',
                    trigger: 'blur'
                }, {
                    pattern: /^(\.*)(\d+)(\.?)(\d{0,6}).*$/g,
                    message: '请输入数字',
                    trigger: 'blur'
                }],
                stopFreq: [{
                    required: true,
                    message: '请输入结束频率',
                    trigger: 'blur'
                }, {
                    pattern: /^(\.*)(\d+)(\.?)(\d{0,6}).*$/g,
                    message: '请输入数字',
                    trigger: 'blur'
                }],
                carrierFreq: [{
                    required: true,
                    message: '请输入载波频率',
                    trigger: 'blur'
                }, {
                    pattern: /^(\.*)(\d+)(\.?)(\d{0,6}).*$/g,
                    message: '请输入数字',
                    trigger: 'blur'
                }],
                carrierBand: [{
                    required: true,
                    message: '请输入载波带宽',
                    trigger: 'blur'
                }, {
                    pattern: /^(\.*)(\d+)(\.?)(\d{0,3}).*$/g,
                    message: '请输入数字',
                    trigger: 'blur'
                }],
                disposeMode: [{
                    required: true,
                    message: '请选择处理模式',
                    trigger: 'change'
                }],
            },
            sampleFromOptions: [{
                "label": "本地样本",
                "value": 0
            }, {
                "label": "系统样本",
                "value": 1
            }],
            workModeOptions: [{
                "label": "扫频模式",
                "value": 0
            }, {
                "label": "定频模式",
                "value": 1
            }],
            disposeModeOptions:[
                [{label:'载波检测',value:0},{label:'测频测速',value:1},{label:'调制识别',value:2},{label:'编码识别',value:3}],
                [{label:'测频测速',value:0},{label:'调制识别',value:1},{label:'编码识别',value:2}]
            ]
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        // document.getElementById('localhostFile').addEventListener("change",ev => {
        //     console.log(ev.target.)
        // })
    },
    methods: {
        sleep(time){
            var timeStamp = new Date().getTime()
            var endTime = timeStamp + time
            while(true){
                if (new Date().getTime() > endTime){
                    return
                }
            }
        },
        querySamples(){
            this.serverFileDialog.loading = true
            this.sleep(2000);
            this.serverFileDialog.sampleTotal = 1
            this.serverFileDialog.loading = false
        },
        handleQuery() {
            this.queryParams.pageNum = 1,
            this.querySamples()
        },
        resetQuery(){
            this.serverFileDialog.queryDateRange = [],
            this.$refs['querySampleForm'].resetFields(),
            handleQuery()
        },
        submitChooseServerFile(){
            this.serverFileDialog.open = false
        },
        cancelChooseServerFile(){
            this.serverFileDialog.open = false
        },
        submitForm() {
            this.$refs['workParamsForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['workParamsForm'].resetFields()
        },
        selectSamplePath() {
            if (this.workParams.sampleFrom === 0){
                document.getElementById('localhostFile').click()
            }else{
                this.serverFileDialog.open = true
                this.handleQuery()
            }
        },
        changeFile(e){
            this.localhostFile = document.getElementById('localhostFile').files[0]
            this.workParams.samplePath = this.localhostFile.name
        }
    }
}
</script>

<style scoped>
.el-row {
    display: flex;
    flex-wrap: wrap
}

.el-card {
    min-width: 100%;
    min-height: 100%;
    margin-right: 2px;
    transition: all .5s;
}

</style>